<style scoped >
    /*新增，编辑表单*/
    .ivu-input-wrapper {
        width: 90%;
    }
    .ivu-form-item-content .guobieSel{width: 90%}
    .showexpress .popup .ivu-modal-content .ivu-modal-body .ivu-row .ivu-col{padding: 3px 35px;box-shadow: 0px 0px 3px 0px #f0f0f0;}
    .showexpress .popup .ivu-modal-content .ivu-modal-body .ivu-row .ivu-col .ivu-form-item{margin-bottom: 0px;}
</style>
<template>
    <div class="console-product">
        <!-- 头部-->
        <Row class="position">
            <i-col :xs="12" :sm="10" :md="8" :lg="6" >
                <div class="ivu-breadcrumb">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">物流中心</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">快递公司</span>
                </div>
            </i-col>
            <i-col class="fr">
                <span>
                    <Button @click="addExpress"><i class="iconfont" style="color:#37b3b3;">&#xe649;</i> 新增快递公司</Button>
                    <Modal class-name="popup" class="express" v-model="expressModal" width="400" @on-cancel="cancelPicOrder('expressValidate')" :mask-closable="false" >
                        <p slot="header" style="color: #eeebeb;" v-drag>
                            <span v-if="addCus">新增快递公司</span>
                            <span v-if="editorCus">编辑快递公司</span>
                        </p>
                        <div class="center">
                            <Form  ref="expressValidate" :model="expressValidate" :rules="ruleExpress" label-position="left" :label-width="75">
                                <input type="hidden" name="id" v-model="expressValidate.id">
                                <Form-item label="公司Code:" prop="expressCode">
                                    <Input v-model="expressValidate.expressCode" :disabled="editorCus"></Input>
                                </Form-item>
                                <Form-item label="公司名称:" prop="expressName">
                                    <Input v-model="expressValidate.expressName" :disabled="editorCus"></Input>
                                </Form-item>
                                <Form-item label="账号:" prop="accountNumber">
                                    <Input v-model="expressValidate.accountNumber"></Input>
                                </Form-item>
                                <Form-item label="密码:" prop="password">
                                    <Input v-model="expressValidate.password"></Input>
                                </Form-item>
                                <Form-item label="推送地址:" prop="pushurl">
                                    <Input v-model="expressValidate.pushurl" type="textarea" :rows="1"></Input>
                                </Form-item>
                                <Form-item label="接收地址:" prop="accepturl">
                                    <Input v-model="expressValidate.accepturl" type="textarea" :rows="1"></Input>
                                </Form-item>
                                <Form-item label="国别:" prop="country">
                                    <Select class="guobieSel" v-model="expressValidate.country" filterable>
                                        <Option v-for="item in expressCountry" :value="item.value" :key="item">{{ item.label }}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="状态:" prop="status">
                                    <Radio-group v-model="expressValidate.status">
                                        <Radio label="1">启用</Radio>
                                        <Radio label="0">禁用</Radio>
                                    </Radio-group>
                                </Form-item>
                            </Form>
                        </div>
                        <div slot="footer">
                            <div class="footer">
                                 <Button v-if="addCus" class="save" :loading="modal_loading" @click="addPicOrder('expressValidate')">保存</Button>
                                <Button v-if="addCus" class="clear" @click="clearPicOrder('expressValidate')">清空</Button>
                                <Button v-if="editorCus" class="save" :loading="modal_loading" @click="savePicOrder('expressValidate')">保存</Button>
                            </div>
                        </div>
                </Modal>
                </span>
                <Modal class-name="popup" class="showexpress" v-model="showexpressModal" width="400" @on-cancel="cancelshowexpress('showexpressValidate')" :mask-closable="false" >
                    <p slot="header"style="color: #eeebeb;" v-drag>
                        <span>快递公司详情</span>
                    </p>
                    <div class="center">
                        <Form  ref="showexpressValidate" :model="showexpressValidate" label-position="left" :label-width="70">
                            <Row>
                                <i-col style="padding-top: 8px">
                                <Form-item label="公司Code:" prop="expressCode">
                                    <span>{{showexpressValidate.expressCode}}</span>
                                </Form-item>
                                </i-col>
                                <i-col style="padding-top: 8px">
                                    <Form-item label="公司名称:" prop="expressName">
                                        <span>{{showexpressValidate.expressName}}</span>
                                    </Form-item>
                                </i-col>
                                <i-col>
                                    <Form-item label="账号:" prop="accountNumber">
                                        <span style=" word-break: break-all;">{{showexpressValidate.accountNumber}}</span>
                                    </Form-item>
                                </i-col>
                                <i-col>
                                    <Form-item label="密码:" prop="password">
                                        <span style=" word-break: break-all;">{{showexpressValidate.password}}</span>
                                    </Form-item>
                                </i-col>
                                <i-col>
                                    <Form-item label="推送地址:" prop="pushurl">
                                        <span  style=" word-break: break-all;">{{showexpressValidate.pushurl}}</span>
                                    </Form-item>
                                </i-col>
                                <i-col>
                                    <Form-item label="接收地址:" prop="accepturl">
                                        <span  style="word-break: break-all;">{{showexpressValidate.accepturl}}</span>
                                    </Form-item>
                                </i-col>
                                <i-col>
                                    <Form-item label="国别:" prop="country">
                                        <span>{{showexpressValidate.country == "1" ? "国外":"国内"}}</span>
                                    </Form-item>
                                </i-col>
                                <i-col style="padding-bottom: 8px;">
                                    <Form-item label="状态:" prop="status">
                                        <span>{{showexpressValidate.status == "1" ? "启用":"禁用"}}</span>
                                    </Form-item>
                                </i-col>
                            </Row>
                        </Form>
                    </div>
                    <div slot="footer"></div>
                </Modal>
            </i-col>
        </Row>
        <!-- 头部结束-->
        <!-- 中间主体-->
        <div class="console-product-contcent" id="contcentHeight" :style="{height:height +'px'}">
            <!-- 搜索-->
            <Form class="searchform" ref="expressForm" :model="expressForm" inline >
                <Form-item label="快递公司名称:" :label-width="78" style="width: 160px">
                    <Input v-model="expressForm.expressName" @on-enter="expressFormSearch"></Input>
                </Form-item>
                <Form-item label="状态:" :label-width="35" style="width: 100px">
                    <Select v-model="expressForm.status">
                        <Option v-for="item in expressStatus" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item>
                    <Button class="search" @click="expressFormSearch">搜索</Button>
                </Form-item>
            </Form>
            <!-- 搜索结束-->
            <!-- 表格-->
            <Loading v-if="spinShow"></Loading>
            <Table v-if="tableShow"  stripe border :columns="expressColumns" :data="expressData"></Table>
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import Loading from '../../components/loading';
    export default {
        //所需子组件
        components: {Loading},
        data () {
            return {
                total:0,//总条数
                currentPage:1,//当前页
                pageTotal:1,//总页数
                pageSize:10,//默认每页显示数量
                height:1000,//表单高度
                spinShow: true,//加载层，默认显示
                tableShow: false,//表格层，默认隐藏
                modal_loading: false,
                isClear:false,
                addCus:false,
                editorCus:false,
                showexpressModal:false,
                expressForm:{//客户档案条件查询
                    expressName:'',
                    status:' '
                },
                //快递公司列表
                expressseachList: [],
                //操作状态
                expressStatus:[
                    {
                        value: ' ',
                        label: '全部'
                    },
                    {
                        value: '0',
                        label: '禁用'
                    },
                    {
                        value: '1',
                        label: '启用'
                    }
                ],
                //国别
                expressCountry:[
                    {
                        value: '0',
                        label: '国内'
                    },
                    {
                        value: '1',
                        label: '国外'
                    },
                ],
                //新增 编辑数据
                expressValidate: {
                    status:'1',
                    expressCode: '',
                    accountNumber:'',
                    password: '',
                    country: '',
                    pushurl:'',
                    accepturl:'',
                    id:''
                },
                showexpressValidate: {//查看详情
                    status:'',
                    expressCode: '',
                    accountNumber:'',
                    password: '',
                    country: '',
                    pushurl:'',
                    accepturl:'',
                    id:''
                },
                ruleExpress: {
                    expressCode: [
                        { required: true, message: '请输入公司Code', trigger: 'blur' }
                    ],
                    expressName: [
                        { required: true, message: '请输入公司名称', trigger: 'blur' }
                    ],
                    accountNumber: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { type: 'string', max: 50, message: '账号不能大于50位', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', max: 50, message: '密码不能大于50位', trigger: 'blur' }
                    ],
                    enUnit: [
                        { required: true, message: '请输入英文单位', trigger: 'blur' }
                    ],
                    hsCode: [
                        { required: true, message: '请输入海关编码', trigger: 'blur' }
                    ],
                    country: [
                        { required: true, message: '请输入国别', trigger: 'change' }
                    ],
                    pushurl: [
                        { type: 'string', max: 200, message: '推送地址不能大于200位', trigger: 'blur' }
                    ],
                    accepturl: [
                        { type: 'string', max: 200, message: '接收地址不能大于200位', trigger: 'blur' }
                    ]
                },
                creatDate0ptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                //客户档案数据格式
                expressColumns:[
                    {
                        width:'6%',
                        title: '序号',
                        type: 'index'
                    },
                    {
                        width:'20%',
                        title: '快递公司Code',
                        key: 'expressCode',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.expressCode,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.expressCode)]);
                        }
                    },
                    {
                        width:'20%',
                        title: '快递公司名称',
                        key: 'expressName',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.expressName,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.expressName)]);
                        }
                    },
                    {
                        width:'18%',
                        title: '账号',
                        key: 'accountNumber',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.accountNumber,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.accountNumber)]);
                        }
                    },
                    {
                        width:'10%',
                        title: '国别',
                        key: 'country',
                        render: (h, params) => {
                            var text = params.row.country == 1 ? '国外': '国内';
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'10%',
                        title: '状态',
                        key: 'status',
                        render: (h, params) => {
                            return h('div', [
                                params.row.status == 0 ?
                                    h('Tooltip', {
                                        props: {
                                            content: '禁用',
                                            placement:"bottom-start"
                                        }
                                    }, [h('i',
                                        {
                                            class:'iconfont icon-suo',
                                            style:{
                                                cursor:'pointer',
                                                color: '#f76165'
                                            },
                                            on: {
                                                click: () => {
                                                    this.toggleExpress(params.row)
                                                }
                                            }
                                        })])
                                    :
                                    h('Tooltip', {
                                        props: {
                                            content: '启用',
                                            placement:"bottom-start"
                                        }
                                    }, [h('i',
                                        {
                                            class:'iconfont icon-suo1',
                                            style:{
                                                cursor:'pointer',
                                                color: '#37b3b3'
                                            },
                                            on: {
                                                click: () => {
                                                    this.toggleExpress(params.row)
                                                }
                                            }
                                        })])
                            ]);
                        }
                    },
                    {
                        width:'20%',
                        title: '操作',
                        key: 'id',
                        render: (h, params) => {
                            return h('div', [
                                h('Button',
                                    {
                                        class:"green",
                                        on: {
                                            click: () => {
                                                this.editExpress(params.row.id)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-bianji'
                                        }),
                                        h("span",'编辑')
                                    ]),
                                h('Button',
                                    {
                                        class:"blue",
                                        on: {
                                            click: () => {
                                                this.checkExpress(params.row.id)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-chakan'
                                        }),
                                        h("span",'查看')
                                    ])
                            ]);
                        }
                    }
                ],
                //快递公司数据
                expressData:[],
                expressModal: false
            }
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth>1600){
                this.pageSize = 20;
            }
            this.expressData = this.expressTableData(this.expressForm,this.currentPage,this.pageSize)
        },
        mounted() {
        },
        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            expressTableData (formData,currentPage,pageSize) {
                this.spinShow=true;
                this.tableShow = false;
                var status = formData.status;//状态
                var expressName = formData.expressName;//快递公司
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        status : status,
                        expressName : expressName
                    }
                };
                axios.get('/expresses',data).then(res => {
                    this.total=res.data.total;
                    this.pageTotal=Math.ceil(res.data.total / pageSize);
                    this.expressData = res.data.data;
                    this.spinShow=false;
                    this.tableShow = true;
                }).catch(err =>{
                })
            },
            //条件查询
            expressFormSearch(){
                this.currentPage = 1;
                this.expressData = this.expressTableData(this.expressForm,this.currentPage,this.pageSize);
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.expressData = this.expressTableData(this.expressForm,this.currentPage,this.pageSize);
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.expressData = this.expressTableData(this.expressForm,this.currentPage,this.pageSize);
            },
            //新增快递公司
            addExpress() {
                var width = window.innerWidth;
                if(width >1600){
                    $("textarea.ivu-input").attr("style","height:32px");
                }else if(width > 1440 && width <=1600){
                    $("textarea.ivu-input").attr("style","height:28px");
                }else if(width > 1366 && width <=1440){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1280 && width <=1366){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1024 && width <=1280){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else{
                    $("textarea.ivu-input").attr("style","height:26px");
                }
                this.expressModal=true;
                this.addCus=true;
                this.editorCus=false;
            },
            //保存新增
            addPicOrder (name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.post('/expresses', this.expressValidate).then(res => {
                            this.modal_loading = false;
                            this.expressModal = false;
                            this.addCus = false;
                            this.$refs[name].resetFields();
                            this.expressData = this.expressTableData(this.expressForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //根据ID编辑快递公司
            editExpress(column) {
                var width = window.innerWidth;
                if(width >1600){
                    $("textarea.ivu-input").attr("style","height:32px");
                }else if(width > 1440 && width <=1600){
                    $("textarea.ivu-input").attr("style","height:28px");
                }else if(width > 1366 && width <=1440){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1280 && width <=1366){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1024 && width <=1280){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else{
                    $("textarea.ivu-input").attr("style","height:26px");
                }
                this.addCus=false;
                this.editorCus=true;
                axios.get('/expresses/ '+ column).then(res => {
                    this.expressValidate = res.data;
                    this.expressModal=true;
                }).catch(err =>{
                })
            },
            //根据ID查看详情
            checkExpress(column) {
                axios.get('/expresses/ '+ column).then(res => {
                    this.showexpressValidate = res.data;
                    this.showexpressModal=true;
                }).catch(err =>{
                })
            },

            //保存编辑
            savePicOrder(name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.put('/expresses', this.expressValidate).then(res => {
                            this.modal_loading = false;
                            this.expressModal = false;
                            this.editorCus=false;
                            this.$refs[name].resetFields();
                            this.expressData = this.expressTableData(this.expressForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //关闭弹窗
            cancelPicOrder (name) {
                this.expressModal = false;
                this.addCus = false;
                this.editorCus = false;
                this.$refs[name].resetFields();
            },
            //关闭查看弹窗
            cancelshowexpress(name) {
                this.$refs[name].resetFields();
                this.showexpressModal = false;
            },
            //清除弹窗
            clearPicOrder (name) {
                this.$refs[name].resetFields();
            },
            //状态切换
            toggleExpress (row) {
                row.status = row.status ==  '0' ?'1' : '0';
                axios.put('/expresses', row).then(res => {
                    this.expressData[row._index].status = this.expressData[row._index].status == '0' ?'1' : '0';
                }).catch(err =>{
                });
            }
        }
    }
</script>